<!--登录页-->
<template>
    <div style="height:100vh;background-image: url('/image/login/login.jpg');background-size:100% 100%;overflow:hidden;">
        <el-container style="padding:30px;">
            <el-header>
                <el-row :gutter="10">
                    <el-col :span="19" style="text-align: left;margin-top: -50px">
                        <el-image src="image/login/DADARecipes.jpg" style="width: 270px;height: auto;"></el-image>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <el-row :gutter="40">
                    <el-col :span="8">
                    </el-col>
                    <el-col :span="8">
                        <!--登录用户表单-->
                        <el-card style="margin-top:50px;" v-if="logCardVisible">
                            <h3 style="text-align:center;">{{title}}</h3>
                            <el-form label-position="top">
                                <el-form-item label="用户名">
                                    <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
                                </el-form-item>
                                <el-form-item label="密码">
                                    <el-input placeholder="请输入密码" type="password" v-model="user.password"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary"  style="width:80%;position: relative;left: 40px" @click="login">登录</el-button>
                                </el-form-item>
                              <el-form-item>
                                <el-button type="primary" link style="width:25%;position: relative;left: 135px"@click="phoneNumberLogin">其他登录方式</el-button>
                              </el-form-item>
                              <el-form-item>
                                <el-button link type="primary" style="position:relative;left: 120px" @click="register">注册用户</el-button>
                                <el-button link type="primary" style="position:relative;left: 105px" @click="resetPassword">| 忘记密码</el-button>
                              </el-form-item>
                            </el-form>
                            <div style="color:#666;text-align:center;font-size:14px;padding:10px 0;">
                                (体验账号:admin 密码:123456)
                            </div>
                        </el-card>
                      <!--注册用户表单-->
                      <el-card style="margin-top:50px;width: 110%" v-if="registerCardVisible">
                        <h3 style="text-align:center;">{{title}}</h3>
                        <el-form label-position="top">
                          <el-form-item label="用户名">
                            <el-input placeholder="请输入用户名" v-model="registerUserData.username"></el-input>
                          </el-form-item>
                          <el-form-item label="密码">
                            <el-input placeholder="请输入密码" type="password" v-model="registerUserData.password"></el-input>
                          </el-form-item>
                          <el-form-item label="手机号">
                            <el-input placeholder="请输入手机号" v-model="registerUserData.phone"></el-input>
                          </el-form-item>
                          <el-form-item label="验证码">
                            <el-input placeholder="请输入验证码" style="width: 50%" v-model="registerUserData.captcha" ></el-input>
                            <el-button type="primary" style="position: relative;left:25px" @click="getCaptcha(registerUserData.phone)">点击发送验证码</el-button>
                          </el-form-item>
                          <el-form-item>
                              <el-button type="primary" style="width:50%;position: relative;left: 100px" @click="registerUser" >注册</el-button>
                          </el-form-item>
                          <el-form-item>
                            <el-button link type="primary" style="position: relative;right: -140px" @click="returnLogin">使用已有账户登录</el-button>
                          </el-form-item>
                        </el-form>
                      </el-card>
                    <!--手机号登录表单-->
                      <el-card style="margin-top:80px;width: 110%" v-if="phoneNumLoginVisible">
                        <h3 style="text-align:center;">{{title}}</h3>
                        <el-form>
                          <el-form-item label="手机号">
                             <el-input placeholder="请输入手机号" v-model="user1.phone"></el-input>
                          </el-form-item>
                          <el-form-item label="验证码">
                             <el-input placeholder="请输入验证码" style="width: 50%" v-model="user1.captcha"></el-input>
                            <el-button type="primary" style="position: relative;left:25px" @click="getCaptcha(user1.phone)">点击发送验证码</el-button>
                          </el-form-item>
                          <el-form-item>
                            <el-button type="primary" style="position: relative;left: 100px;width: 50%" @click="phoneLogin">登录</el-button>
                          </el-form-item>
                          <el-form-item>
                            <el-button link type="primary" style="position:relative;left:165px" @click="returnLogin">其他登录方式</el-button>
                          </el-form-item>
                        </el-form>
                      </el-card>
                  <!--重置密码表单1-->
                      <el-card style="margin-top:80px;width: 110%;" v-if="RestPwdVisible">
                        <h3 style="text-align:center;">{{title}}</h3>
                        <el-form>
                          <el-form-item label="手机号">
                            <el-input placeholder="请输入手机号" v-model="resetPwdData.phone"></el-input>
                          </el-form-item>
                          <el-form-item label="验证码">
                            <el-input placeholder="请输入验证码" style="width: 50%" v-model="resetPwdData.captcha"></el-input>
                            <el-button type="primary" style="position: relative;left:25px" @click="getCaptcha(resetPwdData.phone)">点击发送验证码</el-button>
                          </el-form-item>
                          <el-form-item>
                            <el-button  type="primary" style="position: relative;left: 100px;width: 50%" @click="RestPwdFrom">确认</el-button>
                          </el-form-item>
                          <el-form-item>
                            <el-button link type="primary" style="position:relative;left:165px" @click="returnLogin">返回登录页面</el-button>
                          </el-form-item>
                        </el-form>
                      </el-card>
                <!--重置密码表单2-->
                      <el-card style="margin-top:80px;width: 110%;" v-if="RestPwdVisible1">
                        <h3 style="text-align:center;">{{title}}</h3>
                        <el-form>
                          <el-form-item label="新密码">
                            <el-input placeholder="请输入新密码" v-model="resetPwdData.NewPassword1"></el-input>
                          </el-form-item>
                          <el-form-item label="新密码">
                            <el-input placeholder="请再次输入新密码" v-model="resetPwdData.NewPassword2"></el-input>
                          </el-form-item>
                          <el-form-item>
                            <el-button type="primary"  style="position: relative;left: 100px;width: 50%" @click="resetPwd">确认</el-button>
                          </el-form-item>
                          <el-form-item>
                            <el-button link type="primary" style="position:relative;left:165px" @click="returnLogin">返回登录页面</el-button>
                          </el-form-item>
                        </el-form>
                      </el-card>
                    </el-col>
                  <el-col :span="8">
                  </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import {ref} from "vue";
import qs from 'qs';
import {ElMessage} from "element-plus";
import router from "@/router";
import axios from "axios";


//定义变量用于控制登录框是否可见
const logCardVisible = ref(true);
//定义变量用于控制注册框是否可见
const registerCardVisible = ref(false);
//定义变量用于控制手机号登录框是否可见
const phoneNumLoginVisible =ref(false);
//定义变量用于控制重置密码登录框1是否可见
const RestPwdVisible =ref(false);
//定义变量用于控制重置密码登录框2是否可见
const RestPwdVisible1 =ref(false);
//定义变量用于存储表单的抬头
const title = ref("用户登录");

//定义变量用于存储用户名密码登录用户信息
const user = ref({username:'',password:''});
//定义变量用于存储手机号登录信息
const user1 = ref({phone:'',captcha:''})
//定义变量用于存储注册用户的信息
const registerUserData = ref({
  username:'',
  password:'',
  captcha:'',
  phone:''
})
//定义变量用于存储密码重置的信息
const resetPwdData = ref({
  phone:'',
  captcha:'',
  NewPassword1:'',
  NewPassword2:'',
  newPassword:''
});

//定义方法用于账号密码登录
const login = ()=>{
  //使用qs将数据转为字符串
  const data = qs.stringify(user.value);
  //使用axios向后端发送请求
  axios.post(BASE_URL+'/v1/user/login',data).then((response)=>{
    //对返回值进行判断
    if(response.data.code===2000){
      //跳出弹窗提示用户登录成功
      ElMessage.success("恭喜您！登录成功！");
      //将数据存储到localstorage中
      localStorage.setItem('user',JSON.stringify(response.data.data));
      //清空表单的数据
      user.value={username:'',password:''};
      //跳转到首页
      router.push('/index');
    }else{
      //提示用户错误信息
      ElMessage.error("登录失败！请稍后再试");
      //清空表单的数据
      user.value={username:'',password:''};
    }
  })
}

//定义方法用于手机号登录
const phoneLogin =()=>{
  //将user1的数据转为字符串
  let data = qs.stringify(user1.value);
  //使用axios向后端发送请求
  axios.post(BASE_URL+'/v1/user/phoneLogin',data).then((response)=>{
     if(response.data.code === 2000){
       //提示用户登录成功
       ElMessage.success("恭喜您登录成功!");
       //将数据存储到localstorage中
       localStorage.setItem('user',JSON.stringify(response.data.data));
       //清空表单的数据
       user1.value={phone:'',captcha:''};
       //跳转到首页
       router.push('/index');
     }else{
       ElMessage.error("登录失败！请稍后再试");
     }
  })
}
//定义方法展示注册用户框
const register =()=>{
  //清空登录框的数据
  user.value={};
  //设置抬头为用户注册
  title.value="用户注册";
  //关闭登录框，显示注册框
  logCardVisible.value=false;
  registerCardVisible.value=true;
}
//定义方法用于注册用户
const registerUser =()=>{
  //使用qs将数据转为字符串
  let data=qs.stringify(registerUserData.value);
  //向后端发送请求
  axios.post(BASE_URL+'/v1/user/reg',data).then((response)=>{
    //对回传的code进行判断
    if(response.data.code===2000){
      //提示用户注册成功
      ElMessage.success("注册成功!");
      //清除注册框的表单数据
      registerUserData.value={};
      //关闭注册框，重新显示登录框
      registerCardVisible.value=false;
      logCardVisible.value=true;
    }else{
      //提示用户错误信息
      ElMessage.error("注册失败！请稍后再试");
    }
  })
}
//定义方法用于返回登录的表格界面
const returnLogin =()=>{
    //设置抬头为用户登录
    title.value="用户登录";
    //清空注册表单的信息
    registerUserData.value={};
    //清空登录表单的信息
    user.value={};
    //清空重置密码框的信息
    resetPwdData.value={};
    //关闭注册框
    registerCardVisible.value=false;
    //关闭手机号登录框
    phoneNumLoginVisible.value=false;
    //关闭重置密码框1、2
    RestPwdVisible.value=false;
    RestPwdVisible1.value=false;
    //显示登录框
    logCardVisible.value=true;
}

//定义方法用于手机号登录表格
const phoneNumberLogin=()=>{
  //设置抬头为手机号登录
  title.value="手机号登录";
  //清空登录框的数据
  user.value={};
  //关闭登录窗口，显示手机号登录窗口哦
  logCardVisible.value=false;
  phoneNumLoginVisible.value=true;
}
//定义方法用于忘记密码表单
const resetPassword =()=>{
  //清空登录框的数据
  user.value={};
  //将抬头更改为忘记密码
  title.value="密码重置";
  //关闭登录框
  logCardVisible.value=false;
  //显示忘记密码表单
  RestPwdVisible.value=true;

}

//定义方法用于显示重置密码表单2
const RestPwdFrom =()=>{
  //关闭重置密码表单1
  RestPwdVisible.value=false;
  //显示重置密码表单2
  RestPwdVisible1.value=true;
}

//定义方法用于重置密码
const resetPwd =()=>{
  //先判断用户输入的新密码是否相同
  if(resetPwdData.value.NewPassword1!==resetPwdData.value.NewPassword2){
    ElMessage.error("两次密码输入不一致，请重新输入");
    return;
  }
  //使用qs将数据转为字符串格式
  resetPwdData.value.newPassword=resetPwdData.value.NewPassword1;
  let data=qs.stringify(resetPwdData.value);
  console.log(data);
  //向后端发送请求
  axios.post(BASE_URL+'/v1/user/resetPassword',data).then((response)=>{
    if(response.data.code===2000){
      //提示用户重置密码成功
      ElMessage.success("重置密码成功!");
      //将重置密码的表单数据清空
      resetPwdData.value={};
      //关闭弹窗，显示登录框
      RestPwdVisible1.value=false;
      RestPwdVisible.value=false;
      logCardVisible.value=true;
    }else{
      ElMessage.error("密码需含大小写字母且位数超过8位!");
    }
  })
}

//获取验证码功能
const getCaptcha = (phone)=>{
  if(phone==="" || phone===null){
    ElMessage.error("请输入手机号");
    return;
  }
  //向后端发送请求获取验证码
  axios.get(BASE_URL+"/v1/user/generateCaptcha/"+phone).then((response)=>{
    if(response.data.code===2000){
      console.log(response.data.data);
      ElMessage.info('验证码: '+response.data.data)

    }
  })
}
</script>

<style scoped>
</style>